<template>
  微博详情

  <div class="weibo-post">
   <div v-if="weibo">
    <h1>{{ weibo.title }}</h1>
    <p><strong>作者:</strong> {{ weibo.author }}</p>
    <p><strong>创建时间:</strong> {{ formatDate(weibo.createtime) }}</p>
    <img :src="'http://localhost:82/my/static/wbimg/java实训' + weibo.img" alt="微博图片" style="border-radius: 17px; max-width: 100%;">
    <p>{{ weibo.content }}</p>
       <!-- 关注按钮 -->
    <div class="follow-section">
        <button @click="toggleFollow" :class="['follow-button', { 'followed': isFollowing }]">
            {{ isFollowing ? '已关注' : '关注' }}
        </button>
    </div>
  </div>
  <div v-else>
    <p>加载中...</p>
  </div>
    <h2>评论区</h2>
    <div class="comments">
        <!-- 使用 v-for 循环遍历评论列表 -->
        <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
                <span class="username">{{ comment.nickname }}</span>
                <span class="comment-time">{{ formatDate(comment.createtime) }}</span>
            </div>
            <div class="comment-body">
                <p class="comment-text">{{ comment.content }}</p>
            </div>
        </div>
    </div>

    <div class="new-comment">
        <form @submit.prevent="submitComment" class="comment-editor">
            <input type="hidden" name="weiboId" v-model="weiboId">
            <textarea v-model="newCommentContent" placeholder="在此输入你的评论..."></textarea>
            <button type="submit">提交</button>
        </form>
    </div>
</div>
</template>

<script  setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';

// 获取当前路由对象
const route = useRoute();

// 定义一个响应式变量来存储微博详情数据
const weibo = ref(null);
let comments = ref(null);
let newCommentContent = ref(null);

// 格式化日期的方法
function formatDate(dateString) {
  const option = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
  return new Date(dateString).toLocaleDateString('zh-CN', option);
}

// 监听路由参数变化，当 id 变化时重新获取数据
watch(
  () => route.params.id,
  async (newId) => {
    await fetchWeiboDetails(newId);
  },
  { immediate: true } // 立即触发一次监听
);

const isFollowing = ref(true)
import u from '../stores/userStore.js'
const op = u()
async function toggleFollow() {
            isFollowing.value = !isFollowing.value;
            if (isFollowing.value) {
                console.log(11111);
               await axios.post(`http://localhost:82/my/ajax/add?Marstid=${weibo.value.userid}&userid=${op.cur_user.id}`);
            } else {
                console.log(222222);
              try {
            await axios.post(`http://localhost:82/my/ajax/remove?id=${weibo.value.id}`);
        } catch (error) {
            console.error('Error removing follow:', error);
        }
            }
        }

// 定义一个异步函数来获取微博详情
async function fetchWeiboDetails(id) {
  try {
    const response = await axios.get(`http://localhost:82/my/ajax/wb/detail?id=${id}`);
    weibo.value = response.data.date.weibo;
    comments = response.data.date.comments
     const l = await axios.get(`http://localhost:82/my/ajax/FoOrUnfo?Marstid=${weibo.value.userid}&userid=${op.cur_user.id}`);
   isFollowing.value= l.data.state == 200 ? true :false
    
  } catch (error) {
    console.error("Failed to fetch weibo details:", error);
    // 处理错误情况，如显示错误信息给用户
  }
}

async function submitComment(id) {
  try {
   if(newCommentContent.value!=null){
      const response = await axios.post(`http://localhost:82/my/ajax/wb/detail?weiboId=${route.params.id}&content=${newCommentContent.value}`);
    fetchWeiboDetails(route.params.id)
    newCommentContent=''
   }else{
     alert("请输入评论内容")
   }
  } catch (error) {
    console.error("Failed to fetch weibo details:", error);
    // 处理错误情况，如显示错误信息给用户
  }
}


</script>
<style scoped>
.follow-section {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}

.follow-button {
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.follow-button.followed {
    background-color: #fff;
    color: #ff6600;
    border: 1px solid #ff6600;
}

.follow-button:not(.followed) {
    background-color: #ff6600;
    color: #fff;
}
.weibo-post {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comments {
    margin-top: 20px;
}

.comment-item {
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.username {
    font-weight: bold;
    color: #333;
}

.comment-time {
    color: #999;
    font-size: 0.9em;
}

.comment-body {
    margin-left: 10px;
}

.comment-text {
    color: #333;
}

.new-comment {
    margin-top: 20px;
}

.comment-editor {
    display: flex;
    gap: 10px;
}

.comment-editor textarea {
    flex-grow: 1;
    width: 100%;
    height: 60px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
}

.comment-editor button {
    padding: 10px 20px;
    background-color: #ff6600;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.comment-editor button:hover {
    background-color: #e65c00;
}
</style>
